<template>
  <el-dialog
      @close="handleClose"
      :title="dialogTitle"
      width="40%">
    <el-form
        ref="formRef"
        style="max-width: 600px"
        :model="form"
        :rules="rules"
        label-width="auto"
        :disabled="formDisabled"
        status-icon>
      <el-form-item label="会员姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="form.mobile" />
      </el-form-item>
      <el-form-item label="会员标签" prop="type">
        <el-select
            v-model="form.type"
            placeholder="Select"
            size="large"
        >
          <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商会职务" prop="associationPost">
        <el-select
            v-model="form.associationPost"
            filterable
            allow-create
            placeholder="Select"
            size="large"
        >
          <el-option
              v-for="item in postOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称" prop="companyName">
        <el-input v-model="form.companyName" />
      </el-form-item>
      <el-form-item label="通讯地址" prop="address">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="会员介绍" prop="introduction">
        <el-input v-model="form.introduction" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from "vue"
import axios from "@/util/axios"
import {ElMessage} from "element-plus"

// 会员类型
const typeOptions = [
  {
    value: '1',
    label: '个人会员',
  },
  {
    value: '2',
    label: '企业会员',
  }
]
// 商会职务
const postOptions = [
  {
    value: '会长',
    label: '会长',
  },
  {
    value: '常务副会长',
    label: '常务副会长',
  },
  {
    value: '执行会长',
    label: '执行会长',
  },
  {
    value: '党支部书记',
    label: '党支部书记',
  },
  {
    value: '秘书长',
    label: '秘书长',
  },
  {
    value: '副秘书长',
    label: '副秘书长',
  },
  {
    value: '副会长',
    label: '副会长',
  },
  {
    value: '常务理事',
    label: '常务理事',
  },
  {
    value: '理事',
    label: '理事',
  },
  {
    value: '会员',
    label: '会员',
  }
]
const formRef = ref()
const form = ref({
  id: null,
  name: '',
  mobile: '',
  address: '',
  associationPost: '',
  introduction: '',
  headImage: '',
  type: null,
  companyName: ''
})
const rules = ref({
  name: [
    {required: true, message: '请输入会员姓名'}
  ],
  mobile: [
    {required: true, message: '请输入手机号码'}
  ]
})
const formDisabled = ref(false)
const dialogTitle = ref('')
const props = defineProps({
  memberId: Number,
  operatorType: String
})
const emit = defineEmits(['update:modelValue', 'initTableData'])

// 初始化数据
const initData = async () => {
  try {
    form.value.id = props.memberId
    let result = await axios.get('/member/detail/' + props.memberId)
    if (result.status === 200) {
      const data = result.data
      form.value.name = data.name
      form.value.mobile = data.mobile
      form.value.address = data.address
      form.value.introduction = data.introduction
      form.value.associationPost = data.associationPost
    }else {
      ElMessage.error('提交失败')
    }
  }catch (e) {
    ElMessage.error('提交失败')
  }
}

// 关闭
const handleClose = () => {
  emit('update:modelValue', false)
  formRef.value.resetFields()
};

// 确认提交
const onSubmit = () => {
  formRef.value.validate(async(valid) => {
    if (valid) {
      try {
        let result = await axios.postJson('/member/modify', form.value)
        if (result.status === 200) {
          ElMessage.success('提交成功')
          emit('update:modelValue', false) // 关闭弹框
          emit('initTableData') // 通知父组件刷新列表
        }else {
          ElMessage.error('提交失败')
        }
      }catch (e) {
        ElMessage.error('提交失败')
      }
    }else {
      ElMessage.error('提交失败')
    }
  })
}

// 监听
watch([() => props.memberId, () => props.operatorType], () => {
  if (props.operatorType === 'update') {
    formDisabled.value = false
    dialogTitle.value = '修改会员信息'
    initData()
  }else if (props.operatorType === 'view') {
    formDisabled.value = true
    dialogTitle.value = '查看会员信息'
    initData()
  }
})
</script>

<style scoped>

</style>
